import React from 'react';
import './MessageList.css';

function MessageList({ messages, currentUser, onRecallMessage }) {
  return (
    <div className="message-list">
      {messages.map((message, index) => (
        <div 
          key={index} 
          className={`message ${message.type === 'system' ? 'system-message' : ''} ${message.username === currentUser ? 'self' : 'other'} ${message.recalled ? 'recalled' : ''}`}
        >
          {message.type !== 'system' && (
            <div className="message-avatar">
              {message.username.charAt(0).toUpperCase()}
            </div>
          )}
          <div className="message-content-wrapper">
            {message.type !== 'system' && (
              <div className="message-username">{message.username}</div>
            )}
            <div className="message-content">
              {message.recalled ? '消息已撤回' : message.message}
            </div>
            <div className="message-footer">
              <div className="message-time">
                {new Date(message.timestamp).toLocaleTimeString()}
              </div>
              {message.type !== 'system' && message.username === currentUser && !message.recalled && (
                <button 
                  className="recall-button"
                  onClick={() => onRecallMessage(message.id)}
                >
                  撤回
                </button>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default MessageList;